<script setup>
import { shallowRef, ref } from "vue";
import Comp01 from "../components/KeepAlive/Comp/Comp01.vue";
import Comp02 from "../components/KeepAlive/Comp/Comp02.vue";

// vue默认不支持运行时编译
// 如果需要配置运行时编译器的 Vue 构建版本，需要在vue.config.js配置一个属性runtimeCompiler: true
// import Comp01 from "../components/KeepAlive/CompJS/Comp01.js";
// import Comp02 from "../components/KeepAlive/CompJS/Comp02.js";

const current = shallowRef(Comp01)
</script>

<template>
  <div>
    <label><input type="radio" v-model="current" :value="Comp01" /> A</label>
    <label><input type="radio" v-model="current" :value="Comp02" /> B</label>
    <KeepAlive>
      <component :is='current'></component>
    </KeepAlive>
    <!-- 它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。 -->
    <!-- vue2中name属性要提供，且要与路由的name保持一致，不然匹配不成功且不会进入缓存，vue3（3.2.34 ）版本之后，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。 -->
    <hr />
    <!-- <KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。 -->
    <!-- 
      1、以英文逗号分隔的字符串 
      <KeepAlive include="a,b"></KeepAlive>
      2、正则表达式 (需使用 `v-bind`)
      <KeepAlive include="/a|b/"></KeepAlive>
      3、数组 (需使用 `v-bind`)
      <KeepAlive include="['a', 'b']"></KeepAlive>
     -->
     <!-- 我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。 -->
     <!-- <KeepAlive :max="10"></KeepAlive> -->
     <!-- 缓存实例的生命周期：onActivated() 和 onDeactivated() -->
  </div>
</template>